import React, { useEffect, useState } from 'react';
import jwt from 'jsonwebtoken';
import { useDispatch, useSelector } from 'react-redux';
import io from 'socket.io-client';

import './index.less';
import Message from '@/pages/message/Message.tsx'; // 消息页
import Index from '@/pages/home/Index.tsx'; // Home下的首页
import Me from '@/pages/me/Me.tsx'; // 个人中心
import Friend from '@/pages/friend/Friend.tsx'; // 个人中心

import Dynamic from '@/pages/dynamic/Dynamic.tsx';

import BottomBar from '@/itemComponent/bottomBar/BottomBar.tsx'; // 底部tabbar
import StatusBar from '@/itemComponent/statusBar/StatusBar.tsx'; // 状态栏
import Conversation from '@/itemComponent/conversation/Conversation.tsx'; // 通话组件

import { Route } from '@/component/router/Route.tsx';
import KeepAlive from '@/component/keepAlive/KeepAlive.js';

import local from '@/utils/local';
import { getHash } from '@/utils/public';
import { setUser, setIsConversation } from '@/redux/actions';
import { initSocket, WebSocket } from '@/utils/webSocket';

const Home = (props: any) => {
  const [path, setPath] = useState(getHash());
  const dispatch = useDispatch();
  const redux = useSelector((state: DefaultRedux) => state);

  // 底部tab栏切换
  const bottomBarToggle = (type: string) => {
    console.log(type, props);
    if (type === '消息') {
      props.router.replace('/home/message');
      setPath('/home/message');
      return;
    }
    if (type === '朋友') {
      props.router.replace('/home/friend');
      setPath('/home/friend');
      return;
    }
    if (type === '首页') {
      props.router.replace('/home/index');
      setPath('/home/index');
      return;
    }
    if (type === '我') {
      props.router.replace('/home/me');
      setPath('/home/me');
    }
  };

  // 是否渲染通话界面

  useEffect(() => {
    const token = local.get('token');
    if (token) {
      jwt.verify(token, 'hl', (err: any, data: any) => {
        if (err || !data) {
          console.log(props);
          // history.replace('/login');
          props.router.replace('/login');
          return;
        }
        // console.log('token', data);
        dispatch(setUser(data));
        // webSocket连接
        const socket = io('http://192.168.43.174:3000');

        socket.on('connect', () => {
          WebSocket.socket = socket;
          socket.emit('user', { username: data.username });
          initSocket(dispatch);
        });
        // console.log('redux', redux);
      });
    } else {
      props.router.replace('/login');
    }
  }, []);

  return (
    <div className="home fx fx-d">
      {/* 状态栏 */}
      <StatusBar></StatusBar>

      {/* 其他页 */}
      <Route path="/home/index">
        <KeepAlive id="/home/index">
          <Index></Index>
        </KeepAlive>
      </Route>
      <Route path="/home/message">
        <KeepAlive id="/home/message">
          <Message></Message>
        </KeepAlive>
      </Route>
      <Route path="/home/me">
        <KeepAlive id="/home/me">
          <Me></Me>
        </KeepAlive>
      </Route>
      <Route path="/home/friend">
        <KeepAlive id="/home/friend">
          <Friend></Friend>
        </KeepAlive>
      </Route>

      <BottomBar path={path} className="BottomBar fx0" onClick={bottomBarToggle}></BottomBar>

      {/* 通话组件 */}
      {redux.isConversation && <Conversation></Conversation>}

      {/* 其他路由组件 */}
      <Route path="/home/dynamic">
        <Dynamic></Dynamic>
      </Route>
      {/*  */}
    </div>
  );
};

export default Home;
